<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="author" content="wangbo">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app"> </div>
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/prop-types.js"></script>
    <script src="../js/babel.min.js"></script>
    <script src="../js/jquery.js"></script>
    <script type="text/babel">
        // 首字母必须大写
        class Myapp extends React.Component {
            /* 构造方法,初始化数据和绑定方法
            可以不写
            */
            constructor(props) {
                super(props)
                // function susuccessfn(data) {
                //     console.log('成功之后需要执行的方法', data)
                //     console.log(data.uername)   
                // }
                let susuccessfn = (data) => {
                    console.log('成功之后需要执行的方法', data)
                    console.log(data.uername)  
                    this.state = {
                        name: data.uername,
                        age: 20
                    }                   
                }
                // 从服务端拿数据来修改state初始化的的值 , 异步方法-->页面都渲染成功了,访问的时间不是确定的               
                $.ajax({
                    url: 'http://127.0.0.1/react',
                    // 同步的
                    async: false,
                    data: { name: 'lisi', age: '20' },
                    type: "get",
                    success: susuccessfn,
                    error: function (msg) {
                        console.log('失败执行的方法', msg)
                    }
                })
                // this.state = {
                //     name: '李四',
                //     age: 20
                // }
            }
            render() {
                return (
                    <div> 初始化的数据--&gt; {this.state.name}  ,点击我,就会被卸载掉
                        <Mybtn />
                    </div>
                )
            }
        }
        class Mybtn extends React.Component {
            constructor(props) {
                super(props)
            }
            render() {
                return (
                    <div> 我接受父类传来的值--&gt;   </div>
                )
            }
        }
        // es6 方法付默认值
        function myajax(successfn, url = 'http://127.0.0.1/user') {
            $.ajax({
                url: url,
                data: { name: 'lisi', age: '20' },
                type: "get",
                success: successfn,
                error: function (msg) {
                    console.log('失败执行的方法', msg)
                }
            })
        }

        // 特殊符号
        ReactDOM.render(<Myapp />, document.getElementById('app'))
    </script>

</body>

</html>